<template>
	<view class="rd-short yb-flex">
		<video
		loop
		enable-danmu
		autoplay
		:show-center-play-btn="false"
		ref="video"
		class="yb-flex-1"
		:danmu-list="barrages"
		:src="src"
		v-if="visible"
		:controls="false"
		@play="onplay"
		@pause="onpause"
		@timeupdate="ontimeupdate"
		@tap="pause"></video>
		<image v-if="!visible" class="cover" :src="poster" mode="aspectFit"></image>
		<view class="mask"></view>
		<view class="progress yb-flex yb-row">
			<view :style="{
				'background-color': skinColor.color_orange,
				width: progress + 'px'
			}"></view>
		</view>
		<view class="pause yb-flex yb-align-center yb-justify-center" v-if="isPause && src && !isInit" @tap="play">
			<rd-icon name="tv-play-fill" :size="100" color="rgba(255,255,255,.5)"></rd-icon>
		</view>
	</view>	
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			src: {
				type: String,
				default: ''
			},
			poster: {
				type: String,
				default: ''
			},
			barrages: {
				type: Array,
				default () {
					return new Array
				}
			}
		},
		computed: {
			progress () {
				return this.windowWidth * (this.currentTime / this.duration)
			}
		},
		data () {
			return {
				isInit: true,
				isPause: true,
				duration: 0,
				currentTime: 0,
				windowWidth: 0
			}
		},
		mounted() {
			this.windowWidth = uni.getSystemInfoSync().windowWidth
		},
		methods: {
			play () {
				this.$refs.video.play()
			},
			pause () {
				this.$refs.video.pause()
			},
			stop () {
				this.$refs.video.stop()
			},
			onplay () {
				this.isPause = false
				this.isInit = false
			},
			onpause () {
				this.isPause = true
			},
			ontimeupdate (e) {
				this.currentTime = parseFloat(e.detail.currentTime) || 0
				this.duration = parseFloat(e.detail.duration) || 0
			}
		}
	}
</script>

<style>
	.rd-short .cover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.rd-short .mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.2);
	}
	.rd-short .progress {
		height: 3rpx;
		background-color: rgba(255,255,255,.4);
	}
	.rd-short .pause {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>